<template>
    <view>
        <!-- 头部展示 -->
        <view v-if="datainfo.status == 1" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">商品未发货, 如有问题可咨询客服</view>

        <view class="pages margin-top-sm" v-if="datainfo.isView">
            <view class="numbox bg-white" v-if="datainfo.status == 6">
                <view class="item-warp item-state"><text>退款成功, 货款已原路返回</text></view>
                <view class="flexs justify-between item-warp text-df">
                    <text>退款金额:</text>
                    <text style="color: #ff1b0b">￥{{ datainfo.payAmount }}</text>
                </view>
            </view>
            <view class="numbox padding-lg bg-white" v-if="datainfo.status == 8">
                <view class="item-warp item-state"><text>等待平台商家处理中</text></view>
                <view class="flexs justify-between text-df"><text>若3天未处理, 请联系售后, 客服电话:0755-84659719</text></view>
            </view>
            <view class="numbox padding-lg bg-white" v-if="datainfo.status == 9">
                <view class="item-warp item-state"><text>退款失败, 平台拒绝您的申请</text></view>
                <view class="flexs justify-between item-warp text-df">
                    <text>{{ datainfo.auditremark || '无' }}</text>
                </view>
            </view>
        </view>

        <!-- 商品 -->
        <view class="pages">
            <view class="contenttext" v-for="(item, index) in datainfo.mallOrderItemDtos" :key="index">
                <image :src="item.productPic" class="contenttextimg margin-right"></image>

                <view style="width: 470rpx">
                    <view class="text-black text-df text-bold text-tline" style="height: 78rpx">
                        {{ item.productName }}
                    </view>
                    <view class="flexs justify-between margin-top-sm text-darkGrey text-sm">
                        <view>{{ item.spType }}</view>
                        <view>x{{ item.productQuantity }}</view>
                    </view>
                    <view class="centers text-df text-bold padding-top-xs text-price text-red" v-if="checkMaker && item.priceMaker">{{ item.priceMaker }}</view>
                    <view class="centers text-df text-bold padding-top-xs text-price text-red" v-else>{{ item.productPrice }}</view>
                </view>
            </view>
        </view>
        <block v-if="datainfo.isView">
            <!-- 订单信息 -->
            <view class="pages">
                <view class="numbox margin-top-sm bg-white">
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">订单编号:</view>
                        <view class="numboxlistleft">{{ datainfo.orderSn || '' }}</view>
                    </view>
                    <view class="numboxlist">
                        <view class="text-df text-black">退款金额:</view>
                        <view style="color: #ff1b0b">￥{{ datainfo.payAmount }}</view>
                    </view>
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">申请原因:</view>
                        <view class="numboxlistleft">{{ datainfo.refundReason || '' }}</view>
                    </view>
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">申请说明:</view>
                        <view class="numboxlistleft">{{ datainfo.refundMark || '' }}</view>
                    </view>
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">申请时间:</view>
                        <view class="numboxlistleft">{{ datainfo.refundTime || '' }}</view>
                    </view>
                </view>
            </view>
        </block>
        <block v-else>
            <!-- 订单信息 -->
            <view class="pages">
                <view class="numbox margin-top-sm bg-white">
                    <view class="numboxlist">
                        <view class="text-df text-black">申请原因:</view>
                        <view class="numboxlistleft">
                            <input class="text-df text-black item-select" @tap="onShowSelect" :disabled="true" :value="reason" placeholder="请选择" />
                            <image src="/static/images/righticon.png" class="numboximg margin-right-xs"></image>
                        </view>
                    </view>
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">退款金额:</view>
                        <view style="color: #ff1b0b">￥{{ datainfo.payAmount }}</view>
                    </view>
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">申请说明:</view>
                        <textarea class="flex-sub margin-left-lg text-right" :value="remark" placeholder="请输入" auto-height maxlength="150" @input="onRemark"></textarea>
                    </view>
                </view>
            </view>

            <!-- 客服 -->
            <view class="pages margin-top-sm">
                <view class="item-phone">
                    <view class="text-df text-black">联系方式:</view>
                    <input class="text-df text-black" :value="userPhone" @input="onComfirm" />
                </view>
            </view>

            <!-- 底部按钮 -->
            <view class="subbtn subbtn1" @tap="onSubmit">提交</view>

            <van-action-sheet :show="showSheet" :actions="actions" @select="onSelect" @close="onClose" />
        </block>
    </view>
</template>

<script>
// pages/mallorder/refund/index.js
const _request = require('../../../utils/request.js');

const app = getApp();
export default {
    data() {
        return {
            datainfo: {
                status: 0,
                isView: '',
                payAmount: '',
                auditremark: '',
                mallOrderItemDtos: [],
                orderSn: '',
                refundReason: '',
                refundMark: '',
                refundTime: ''
            },

            showSheet: false,
            checkMaker: false,

            //是否是创客用户
            actions: [
                {
                    name: '七天无理由退款'
                },
                {
                    name: '不喜欢/不想要了'
                },
                {
                    name: '收货人/电话/地址错误'
                },
                {
                    name: '买多了'
                },
                {
                    name: '价格太贵'
                },
                {
                    name: '发货太慢'
                },
                {
                    name: '协商一致退款'
                },
                {
                    name: '其他原因'
                }
            ],

            reason: '',
            remark: '',
            userPhone: '',
            reload: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let that = this;
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('acceptData', function (res) {
            that.setData({
                datainfo: res || {}
            });

            if (res && res.isView) {
                uni.setNavigationBarTitle({
                    title: '退款详情'
                });
            }

            console.log(that.datainfo);
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.setData({
            checkMaker: uni.getStorageSync('maker')?.ismaker || false,
            userPhone: uni.getStorageSync('user')?.mobile || ''
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onSelect(event) {
            this.setData({
                showSheet: false,
                reason: event.detail?.name
            });
        },

        onRemark(e) {
            var reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g; //清除表情

            this.setData({
                remark: e.detail?.value?.replace(reg, '')
            });
        },

        onShowSelect() {
            this.setData({
                showSheet: true
            });
        },

        onClose() {
            this.setData({
                showSheet: false
            });
        },

        onComfirm(e) {
            this.setData({
                userPhone: e.detail.value
            });
        },

        onSubmit() {
            console.log(this.datainfo);

            if (!this.reason) {
                uni.showToast({
                    title: '请选择退款原因',
                    icon: 'none'
                });
                return;
            }

            if (!this.userPhone) {
                uni.showToast({
                    title: '请输入联系电话',
                    icon: 'none'
                });
                return;
            }

            let that = this;
            uni.showModal({
                title: '温馨提示',
                content: '确定要申请退款吗？',

                success(res) {
                    if (res.confirm) {
                        that.toRefund();
                    }
                }
            });
        },

        toRefund() {
            _request
                .postObj(
                    '/mall-order/refundApply',
                    {
                        // userId: this.data.datainfo?.userId,
                        id: this.datainfo?.id,
                        orderSn: this.datainfo?.orderSn,
                        refundReason: this.reason,
                        refundMark: this.remark,
                        // refundPhone: this.data.userPhone,
                        largeOrderNo: this.datainfo?.largeOrderNo
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    console.log(res);

                    if (res.data.code === 200) {
                        let pages = getCurrentPages();
                        let prevPage = pages[pages.length - 3];
                        prevPage?.setData({
                            reload: true
                        });
                        uni.showToast({
                            title: '请求成功, 请耐心等待商家处理!',
                            icon: 'none',
                            success: () => {
                                setTimeout(() => {
                                    uni.navigateBack({
                                        delta: 2
                                    });
                                }, 500);
                            }
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '请求失败',
                            icon: 'none'
                        });
                    }
                });
        }
    }
};
</script>
<style>
/* pages/mallorder/refund/index.wxss */
page {
    background: #fbfbfb;
}

.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.fuzhi {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
}

.topbox {
    width: 710rpx;
    height: 180rpx;
    background: #fff;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
}

.topboxaddicon {
    width: 80rpx;
    height: 80rpx;
    margin-left: 20rpx;
}

.toptext {
    display: flex;
    align-items: center;
}

.contenttext {
    width: 670rpx;
    padding: 30rpx 20rpx;
    background: #fff;
    margin-top: 20rpx;
    border-radius: 4rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    display: flex;
}

.contenttextimg {
    width: 160rpx;
    height: 180rpx;
}

.douzi {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
}

.remarks {
    width: 710rpx;
    /* height: 100rpx; */
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
    align-items: center;
    display: flex;
    padding: 14rpx 0;
    justify-content: space-between;
}

.txt-nowrap {
    white-space: nowrap;
}

.txt-break {
    word-break: break-word;
}

.remarksimg {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
}

.numbox {
    width: 710rpx;
    /* height: 320rpx; */
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
    display: flex;
    flex-flow: column;
    padding-bottom: 16rpx;
}

.numboximg {
    width: 32rpx;
    height: 32rpx;
}

.numboxlist {
    width: 670rpx;
    margin: 16rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16rpx;
}

.item-select {
    /* min-width: 400rpx; */
    text-align: right;
}

.numboxlistleft {
    max-width: 530rpx;
    display: flex;
    align-items: center;
}

.numsbottom {
    border-top: 1rpx solid #eeeeee;
    /* padding: 20rpx 0;
  margin:20rpx auto; */
}

.zscontent {
    width: 670rpx;
    padding: 30rpx;
}

.subbtn {
    width: 670rpx;
    height: 88rpx;

    border-radius: 44rpx;
    margin: 60rpx auto;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 32rpx;
}

.subbtn1 {
    background: #ff8722;
    color: #fff;
}

.show_box {
    width: 650rpx;
    line-height: 90rpx;
}

.zscontents {
    width: 670rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
}

.sunbtn1 {
    /* width: 260rpx;
  height: 88rpx; */
    background: #cfcfcf;
    border-radius: 44rpx;
    text-align: center;
    /* line-height: 88rpx; */
    font-size: 32rpx;
    color: #fff;
    padding: 14rpx 74rpx;
}

.sunbtn2 {
    /* width: 260rpx;
  height: 88rpx; */
    background: #ff8722;
    border-radius: 44rpx;
    text-align: center;
    /* line-height: 88rpx; */
    font-size: 32rpx;
    color: #fff;
    /* margin-left: 70rpx; */
    padding: 14rpx 74rpx;
}

.notebox {
    width: 250rpx;
    word-wrap: break-word;
}

.pages.item-around {
    justify-content: space-around;
}

.item-phone {
    width: 670rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
    display: flex;
    margin-bottom: 16rpx;
    background: white;
    padding: 20rpx;
}

.item-phone input {
    margin-left: 40rpx;
    flex: 1;
    text-align: right;
}

.item-warp {
    width: 670rpx;
}

.item-warp text {
    margin-left: 14rpx;
}

.item-state {
    font-size: 34rpx;
    color: #ff8722;
    margin-bottom: 10px;
}
</style>
